<template>
  <page-header-wrapper :title="false" >
    <a-card title="业务详情">
      <template #extra> <a-button type="primary" @click="handleEdit(detail)">编辑业务</a-button></template>
      <a-descriptions bordered title="" size="small">
        <a-descriptions-item label="业务编码" :span="3">{{ detail.code }}</a-descriptions-item>
        <a-descriptions-item label="业务名称" :span="3">{{ detail.name }}</a-descriptions-item>
        <a-descriptions-item label="运营商" :span="3">{{ detail.operName }}</a-descriptions-item>
        <a-descriptions-item label="业务分类" :span="3">{{ detail.clsName }}</a-descriptions-item>
        <a-descriptions-item label="酬金" :span="3">{{ detail.remValue }}</a-descriptions-item>
        <a-descriptions-item label="积分" :span="3">{{ detail.integral }}</a-descriptions-item>
        <a-descriptions-item label="扣款信息" :span="3">{{ detail.dedType == '1' ?'不扣款':detail.dedType == '2'?'固定值':'按比例' }}</a-descriptions-item>
        <a-descriptions-item label="提成规则" :span="3">{{ detail.propValue?? 0 }}元</a-descriptions-item>
        <a-descriptions-item label="会员积分" :span="3">{{ detail.memIntegral ?? 0 }}分</a-descriptions-item>
        <a-descriptions-item label="业务状态" :span="3">
          <a-tag color="#82af6f" v-if="detail?.busiStatus == 1">使用中</a-tag>
          <a-tag color="#abbac3" v-else>未使用</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="重复办理" :span="3">
          <a-tag color="#82af6f" v-if="detail?.isRepeat == 1">可重复</a-tag>
          <a-tag color="#abbac3" v-else>不可重复</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="3">{{ detail.memo }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>
  
<script>
import moment from 'moment'
import { getOpBusinessDetailUsingGET,updateOpBusinessUsingPOST} from  '@/api/api/yunyingshangguanli.ts'
  import { STable } from '@/components'
  import CreateForm from './CreateForm'
  export default {
    name: 'MobileDetail',
    components: {
      STable,
      CreateForm
    },
    data () {
      return {
        mdl: null,
        visible: false,
        value:'',
        confirmLoading:false,
        detail:{},
      }
    },
    mounted(){
     this.getDetail()
    },
    methods:{
      getDetail(){
        getOpBusinessDetailUsingGET({id:this.$route.params.id}).then((res) => {
          this.detail = res.data
        })
        .catch(() => {
          this.$message.error('获取详情失败,请联系管理员')
        })
      },
      handleEdit (record) {
        this.mdl = { ...record, busiStatus: Number(record.busiStatus) }
        this.confirmLoading = false
        this.visible = true
      },
      handleOk () {
        this.visible = false
        this.confirmLoading = true
        const form = this.$refs.createModal.form
        form.validateFields((errors, values) => {
        if (!errors) {
          const params = {
              ...values,
            }
            updateOpBusinessUsingPOST({...params}).then(() => { 
              this.getDetail()
              this.$message.success('修改成功')
            })
            .catch(() => {
              this.$message.error('修改失败,请联系管理员')
            })
        } else {
          this.confirmLoading = false
        }
      })
      },
      handleCancel () {
        this.visible = false
        this.confirmLoading = false
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
    }
   
  }
  </script>